<template>
  <div>
    <div style="background-color: #132144; padding-bottom: 60px">
      <div class="flex justify-between">
        <div
          class="back"
          style="cursor: pointer"
          @click="
            () => {
              $router.back()
            }
          "
        >
          <i class="el-icon-arrow-left" /> {{ $route.query.appName }}
        </div>
      </div>
    </div>
    <div style="position: relative; top: -80px">
      <!-- 应用升级次数 -->
      <div class="lg-card" style="margin: 32px">
        <div class="lg-card-title-block flex justify-between">
          <div class="lg-card-title">
            {{ $t('sysapp.update') }}
          </div>
          <div class="rect-switch self-center">
            <div
              :class="[
                'rect-switch-default',
                appSelected === 'days' ? 'rect-switch-actived' : ''
              ]"
              @click="handleAppSelect('days')"
            >
              {{ $t('dashboard.days') }}
            </div>
            <div
              :class="[
                'rect-switch-default',
                appSelected === 'months' ? 'rect-switch-actived' : ''
              ]"
              @click="handleAppSelect('months')"
            >
              {{ $t('dashboard.month') }}
            </div>
          </div>
        </div>
        <div class="flex">
          <cmd-chart ref="cmdChart" />
        </div>
      </div>


      <el-card
         
        shadow="never"
        style="margin: 32px"
        :body-style="{ padding: '0px' }"
        :page-size="pageSize"
        :total="totalPage"
        :current-page="pageIndex"
        @current-change="currentChangeHandle"
      >

      
<div style="padding: 12px 16px 10px 16px;">

<i class="el-icon-warning center" style="color: #909399; font-size: 16px;" />
<span style="color: #909399;">
  {{ $t('sysapp.date_tip') }}
</span>

</div>
        <el-table v-loading="listLoading" :show-overflow-tooltip="true" :data="tableData">
          <el-table-column header-align="center" :label="$t('sysapp.version')" align="left" prop="version">
            <template v-slot="{row}">
              <div
                class="cursor-pointer underline"
                @click="
                  () =>
                    $router.push({
                      path: '/tms/resources/app-version-detail',
                      query: {
                        packageName: $route.query.packageName,
                        appName: $route.query.appName,
                        version: row.version
                      }
                    })
                "
              >
                {{ row.version }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template v-slot:header="scope">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                <div>
                  {{ $t('sysapp.upgrade_tip') }}
                </div>
              </template>
                <div>
                  {{ $t('sysapp.update') }} <i class="el-icon-question" />
                </div>
              </el-tooltip>
            </template>

            <el-table-column :label="$t('sysapp.1day')" prop="upgradeCount1" width="120" align="center">
              <template v-slot="{row}">
                <div v-if=" row.upgradeCount1 " class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'upgrade', 1)">
                  {{ row.upgradeCount1 }}
                </div>
                <div v-else>
                  {{ row.upgradeCount1 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :label="$t('sysapp.7day')" prop="upgradeCount2" width="120" align="center">
              <template v-slot="{row}">
                <div v-if=" row.upgradeCount2 " class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'upgrade', 7)">
                  {{ row.upgradeCount2 }}
                </div>
                <div v-else>
                  {{ row.upgradeCount2 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :label="$t('sysapp.30day')" prop="upgradeCount3" width="120" align="center">
              <template v-slot="{row}">
                <div v-if="row.upgradeCount3" class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'upgrade', 30)">
                  {{ row.upgradeCount3 }}
                </div>
                <div v-else>
                  {{ row.upgradeCount3 }}
                </div>
              </template>
            </el-table-column>

            <el-table-column :label="$t('sysapp.90day')" prop="upgradeCount4" width="120" align="center">
              <template v-slot="{row}">
                <div v-if="row.upgradeCount4" class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'upgrade', 90)">
                  {{ row.upgradeCount4 }}
                </div>
                <div v-else>
                  {{ row.upgradeCount4 }}
                </div>
              </template>
            </el-table-column>

          </el-table-column>
          <el-table-column align="center">
            <template v-slot:header="scope">
              <el-tooltip effect="dark" placement="top">
                <template #content>
                <div>
                  {{ $t('sysapp.active_tip') }}
                </div>
              </template>
                <div>
                  {{ $t('sysapp.activity') }} <i class="el-icon-question" />
                </div>
              </el-tooltip> </template>
            <el-table-column :label="$t('sysapp.1day')" prop="activeCount1" width="120" align="center">
              <template v-slot="{row}">
                <div v-if="row.activeCount1" class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'active', 1)">
                  {{ row.activeCount1 }}
                </div>
                <div v-else>
                  {{ row.activeCount1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('sysapp.7day')" prop="activeCount2" width="120" align="center">
              <template v-slot="{row}">
                <div v-if="row.activeCount2" class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'active', 7)">
                  {{ row.activeCount2 }}
                </div>
                <div v-else>
                  {{ row.activeCount2 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('sysapp.30day')" prop="activeCount3" width="120" align="center">
              <template v-slot="{row}">
                <div v-if=" row.activeCount3 " class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'active', 30)">
                  {{ row.activeCount3 }}
                </div>
                <div v-else>
                  {{ row.activeCount3 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('sysapp.90day')" prop="activeCount4" width="120" align="center">
              <template v-slot="{row}">
                <div v-if=" row.activeCount4 " class=" cursor-pointer underline" @click="exportAppDeviceByType(row.version, 'active', 90)">
                  {{ row.activeCount4 }}
                </div>
                <div v-else>
                  {{ row.activeCount4 }}
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="gapNum" align="center">
            <template v-slot:header="scope">
              <el-tooltip class="item" effect="dark" :content="$t('sysapp.updated_tip')" placement="top">
                <div>
                  {{ $t('sysapp.updated') }} <i class="el-icon-question" />
                </div>
              </el-tooltip>
            </template>
            <template v-slot="{row}">

              <el-progress
                v-if="row.gapTotal - row.gapNum >= 0"
                type="circle"
                :show-text="false"
                width="36"
                height="36"
                :percentage="computeGapPercent(row)"
              />

              <span v-if="row.gapTotal - row.gapNum > 0" class=" cursor-pointer underline" @click="exportAppDeviceByStatus(row.version, 1)">
                {{ row.gapTotal - row.gapNum }}
              </span>
              <span v-else>
                {{ row.gapTotal - row.gapNum }}
              </span>
              |

              <span v-if="row.gapNum" class=" cursor-pointer underline" @click="exportAppDeviceByStatus(row.version, 2)">
                {{ row.gapNum }}
              </span>
              <span v-else>
                {{ row.gapNum }}
              </span>

            </template>
          </el-table-column>
          <el-table-column prop="perishNum" align="center">
            <template v-slot:header="scope">
              <el-tooltip class="item" effect="dark" :content="$t('sysapp.stranded_tip')" placement="top">
                <div>
                  {{ $t('sysapp.stranded') }} <i class="el-icon-question" />
                </div>
              </el-tooltip>
            </template>
            <template v-slot="{row}">
              <span v-if="row.perishNum" class=" cursor-pointer underline" @click="exportAppDeviceByStatus(row.version, 3)">
                {{ row.perishNum }}
              </span>
              <span v-else>
                {{ row.perishNum }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-row :gutter="1" style="margin: 32px">
        <!-- 版本分布 -->
        <el-col :lg="12" :md="24">
          <div class="lg-card">
            <div class="lg-card-title-block">
              <div class="flex items-center justify-between">
                <span>
                  <span class="lg-card-title">{{ $t('sysapp.version') }}</span>
                </span>
              </div>
            </div>
            <pie-chart ref="pieChart" />
          </div>
        </el-col>
        <!-- 升级分布 -->
        <!-- <el-col :lg="12" :md="24">
        <div class="lg-card" style="margin: 5px; margin-top: 24px">
          <div class="lg-card-title-block">
            <div class="flex items-center justify-between">
              <span>
                <span class="lg-card-title">{{ $t('应用更新结果') }}</span>
              </span>

              <div>
                <chart-data-filter
                  ref="AppDownloadChartFilter"
                  :date-filter="true"
                  @confirm="resetAppDownloadChart"
                />
              </div>
            </div>
          </div>
          <app-download-chart ref="AppDownloadChart" />
        </div>
      </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters'
import { getAppInstallInfo, exportAppDeviceByType, exportAppDeviceByStatus } from '@/api/app'
import cmdChart from './components/cmd-chart.vue'
import PieChart from './components/PieChart.vue'

export default {
  components: {
    cmdChart,
    PieChart
  },
  data() {
    return {
      appPackageName: this.$route.query.packageName,
      appSelected: 'days',
      version: '',
      tableData: [],
      listLoading: false,
      selectedData: [],
      paginationShow: true,
      condition: '',
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    timeFilter,
    dateFilter,
    exportAppDeviceByType(appVersion, exportType, timeRange) {
      this.$confirm(this.$t('sysapp.export_tip'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        if (!this.appPackageName) {
          return
        }
        const params = {}
        params.appPackageName = this.appPackageName
        params.appVersion = appVersion
        params.exportType = exportType
        params.timeRange = timeRange
        this.$alert( this.$t('common.export_tip'), this.$t('common.tips'),{showConfirmButton: false});

        exportAppDeviceByType(params)
          .then((res) => {
            setTimeout(() => {
            this.$msgbox.close()
          }, 3000)
            this.$store.dispatch('app/fetchTaskData')
          })
          .catch((e) => {
            this.$confirmError(e)
          })
      })
    },
    exportAppDeviceByStatus(appVersion, exportType) {
      let wordTip = 'sysapp.export_stranded_tip'
      if (exportType == 1) {
        wordTip = 'sysapp.export_upgrade_tip'
      }
      if (exportType == 2) {
        wordTip = 'sysapp.export_not_upgrade_tip'
      }
      this.$confirm(this.$t(wordTip), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        if (!this.appPackageName) {
          return
        }
        const params = {}
        params.appPackageName = this.appPackageName
        params.appVersion = appVersion
        params.exportType = exportType
        this.$alert( this.$t('common.export_tip'), this.$t('common.tips'), {showConfirmButton: false});

        exportAppDeviceByStatus(params)
          .then((res) => {
            setTimeout(() => {
            this.$msgbox.close()
          }, 3000)
            this.$store.dispatch('app/fetchTaskData')
          })
          .catch((e) => {
            this.$confirmError(e)
          })
      })
    },
    computeGapPercent(row) {
      if (row.gapTotal == null || row.gapTotal == 0) {
        return 0
      }
      if (row.gapNum == null) {
        return 100
      }
      return ((row.gapTotal - row.gapNum)*100 / row.gapTotal)
    },
    handleAppSelect(selected) {
      this.appSelected = selected
      if (selected === 'days') {
        this.$nextTick(() => {
          this.$refs.cmdChart.init({
            dateUnit: 'Day',
            dateRange: 15
          })
        })
      } else if (selected === 'months') {
        this.$nextTick(() => {
          this.$refs.cmdChart.init({
            dateUnit: 'Month',
            dateRange: 12
          })
        })
      }
    },
    fetchData() {
      this.listLoading = true
      const params = {}
      params.appPackageName = this.appPackageName
      params.pageNo = this.pageIndex
      params.pageSize = this.pageSize
      getAppInstallInfo(params)
        // getDeviceAppInfo()
        .then((res) => {
          this.listLoading = false
          this.tableData = res.data
          this.totalPage = res.rows
        })
        .catch((e) => {
          this.listLoading = false
          this.$confirmError(e)
        })
    },

    currentChangeHandle(val) {
      this.pageIndex = val
      this.fetchData()
    }
  }
}
</script>

<style lang="scss">
.terminal-list {
  .el-table .cell {
    /* height: 30px !important; */
  }
}
</style>

<style lang="scss" scoped>
.back {
  color: #ffffff;
  font-size: 20px;
  margin: 20px;
}

.lg-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.12),
    0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 4px 16px 4px rgba(0, 0, 0, 0.04);

  .lg-card-title-block {
    padding: 21px;
    height: 64px;
    border-bottom: #e7eaf3 solid 1px;

    .lg-card-title {
      padding-left: 2px;
      font-size: 16px;
      font-weight: bold;
      line-height: 23px;
      letter-spacing: 0px;
      color: #1a1a1a;
    }
  }
}

.rect-switch {
  height: 38px;
  width: 157px;
  border-radius: 6px;
  background: #f8fafd;
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 3px;
  display: flex;

  .rect-switch-actived {
    background: #ffffff;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1);
  }

  .rect-switch-default {
    cursor: pointer;
    border-radius: 5px;

    width: 77px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #7f8d9b;
  }
}

.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;

  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;

    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-top: 0px;
  }
}
</style>
